<template>
  <div style="margin-top: 40px">
    <!-- <el-button @click="addArticle()">添加文章</el-button> -->
    <div class="articles-area">
      <el-card style="text-align: left">
        <div v-for="article in articles" :key="article.id">
          <div style="float:left;width:85%;height: 150px;">
            <router-link
              style="color: #303133"
              class="article-link"
              :to="{path:'jotter/article',query:{id: article.id}}"
            >
              <span style="font-size: 20px">
                <strong>{{article.articleTitle}}</strong>
              </span>
            </router-link>
            <!-- 作者 时间 上右下左 -->
            <div style="margin:14px 0 0 6px;color: #C0C4CC;" content-position="left">发布者：{{article.username}}  &nbsp;&nbsp;&nbsp;&nbsp; 发布时间：{{article.createTime}}</div>
            <!-- 简介 -->
            <router-link class="article-link" :to="{path:'jotter/article',query:{id: article.id}}">
              <p>{{article.articleAbstract}}</p>
            </router-link>
          </div>
          <!-- 图片 -->
          <el-image
            style="margin:18px 0 0 30px;width:100px;height: 100px"
            :src="article.articleCover"
            fit="cover"
          ></el-image>
          <el-divider></el-divider>
        </div>
      </el-card>
    </div>
    <el-pagination
      style="margin:0 0 35px 0"
      background
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Articles',
  data () {
    return {
      articles: [],
      pageSize: 4,
      total: 0
    }
  },
  mounted () {
    this.loadArticles()
  },
  methods: {
    loadArticles () {
      var _this = this
      this.$axios.get('/articleIndex/' + this.pageSize + '/1').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.articles = resp.data.result.content
          _this.total = resp.data.result.totalElements
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.get('/articleIndex/' + this.pageSize + '/' + page).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.articles = resp.data.result.content
          _this.total = resp.data.result.totalElements
        }
      })
    }
  }
}
</script>

<style scoped>
.articles-area {
  width: 990px;
  height: 750px;
  margin-left: auto;
  margin-right: auto;
}

.article-link {
  text-decoration: none;
  color: #606266;
}

.article-link:hover {
  color: #409eff;
}
</style>
